<!--
 * @Author: @yzcheng
 * @Date: 2021-04-15 09:19:20
 * @Version: 1.0
 * @LastEditors: @yzcheng
 * @Description: 
 * @LastEditTime: 2021-04-23 14:29:25
-->
<template>
  <el-form
    :inline="true"
    ref="form"
    label-width="100px"
    :model="formModel"
    :class="$style['form-container']"
  >
    <el-form-item :prop="key" :label="item.label" :key="key" v-for="(item, key) in formItems">
      <el-input
        :size="item.size"
        v-model="formModel[key]"
        v-if="item.type === 'input'"
        :style="item.style"
        clearable
        :placeholder="item.placeholder || '请输入'"
      ></el-input>
      <el-select
        :size="item.size"
        v-model="formModel[key]"
        v-else-if="item.type === 'select'"
        clearable
        :style="item.style"
        :placeholder="item.placeholder || '请输入'"
      >
        <el-option
          v-for="opt in item.options"
          :key="opt.value"
          :label="opt.label"
          :value="opt.value"
        >
        </el-option>
      </el-select>
      <el-date-picker
        v-else-if="item.type === 'date-time-picker'"
        v-model="formModel[key]"
        type="datetimerange"
        :shortcuts="shortcuts"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        align="right"
      >
      </el-date-picker>
      <el-date-picker
        v-else-if="item.type === 'date'"
        v-model="formModel[key]"
        type="month"
        placeholder="请选择月份"
        align="right"
        format="YYYY-MM"
        @change="
          (val) => {
            changeData(val, key)
          }
        "
      >
      </el-date-picker>
      <SelectTree
        v-else-if="item.type === 'selectTree'"
        v-bind="item.elementProps"
        :treeProps="item.treeProps"
        v-model="formModel[key]"
        :style="item.style"
      />
    </el-form-item>
  </el-form>
</template>

<script>
import formatDate from './format.js'
import SelectTree from '@/components/SelectTree/index.vue'
export default {
  name: 'FormProps',
  props: {
    formModel: {
      type: Object,
    },
    formItems: {
      type: Object,
    },
  },
  components: {
    SelectTree,
  },
  data() {
    return {
      shortcuts: [
        {
          text: '最近一周',
          value: (() => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            return [start, end]
          })(),
        },
        {
          text: '最近一个月',
          value: (() => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            return [start, end]
          })(),
        },
        {
          text: '最近三个月',
          value: (() => {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            return [start, end]
          })(),
        },
      ],
    }
  },
  methods: {
    changeData(value, key) {
      this.formModel[key] = formatDate(value, 'yyyy-MM')
    },
  },
}
</script>

<style module lang="scss">
.form-container {
  :global(.el-form-item) {
    margin-bottom: 0;
  }
}
</style>
